<template>
  <div class="form-container applymentnew-form">
    <el-form
      label-width="120px"
      size="medium"
      label-position="left"
      status-icon
      :model="formData.baseInfo"
      :rules="rules"
      ref="formData.baseInfo"
    >
      <div class="form-item">
        <div class="form-item-hd">
          联系信息
        </div>
        <div class="form-item-bd">
          <el-form-item label="联系人姓名" prop="name">
            <el-input v-model="formData.baseInfo.name" placeholder="联系人姓名（必填）" clearable></el-input>
            <p class="form-item-tips">请填写商户微信支付业务联系人的真实姓名，我们会在微信签约时进行实名认证</p>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <div class="phone-form-item">
              <div class="phone-prefix">+86</div>
              <el-input v-model="formData.baseInfo.phone" placeholder="手机号码（必填）" clearable></el-input>
            </div>

            <p class="form-item-tips">
              用于接收微信支付的重要管理信息及日常操作验证码，我们会在微信签约时进行短信验证
            </p>
          </el-form-item>

          <el-form-item label="常用邮箱" prop="email">
            <el-input v-model="formData.baseInfo.email" placeholder="常用邮箱（必填）" clearable></el-input>
            <p class="form-item-tips">非常重要！用于接收微信支付的账号密码</p>
          </el-form-item>
        </div>
      </div>

      <div class="form-item">
        <div class="form-item-hd">
          经营信息
        </div>
        <div class="form-item-bd">
            <el-form-item label="门店名称" class="widthout-tips" prop="storeName">
            <el-input v-model="formData.baseInfo.storeName" placeholder="门店名称（必填）" clearable></el-input>
          </el-form-item>

          <div class="select-area-box">
            <el-form-item label="门店省市编码" class="widthout-tips" prop="store_province">
              <el-select placeholder="请选择" v-model="formData.baseInfo.store_province"  @change="getAreaLv2">
                <el-option
                  v-for="(item, index) in areaOpt.provinceList"
                  :label="item.localName"
                  :value="item.pkAreaId"
                  :key="item.pkAreaId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="" class="widthout-tips" label-width="15px" prop="store_city">
              <el-select placeholder="请选择" v-model="formData.baseInfo.store_city">
                <el-option
                  v-for="(item, index) in areaOpt.cityList"
                  :label="item.localName"
                  :value="item.pkAreaId"
                  :key="item.pkAreaId"
                ></el-option>
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="门店地址" class="widthout-tips" prop="storeAddress">
            <el-input v-model="formData.baseInfo.storeAddress" placeholder="门店地址（必填）" clearable></el-input>
          </el-form-item>
          <el-form-item label="门店门口照片" class="widthout-tips" v-if="!formData.baseInfo.storeEntrancePicBase64" prop="storeEntrancePic">
            <div class="upload-box">
              <div class="tips">
                须为彩色图片且小于2M，文件格式为png、jpeg、jpg
              </div>
              <div class="upload-btn-box">
                <el-button type="primary" plain>上传文件</el-button>
                <input
                  type="file"
                  class="file-button"
                  accept="image/jpeg, image/png,image/gif"
                  @change="storeDoorPicChange"
                />
              </div>
              <div class="img-box" v-if="formData.baseInfo.storeEntrancePic">
                <img :src="formData.baseInfo.storeEntrancePic" alt="" />
              </div>
              <el-input v-show="false" v-model="formData.baseInfo.storeEntrancePic"></el-input>
            </div>
          </el-form-item>

          <el-form-item
            label="门店门口照片"
            class="widthout-tips"
            v-if="formData.baseInfo.storeEntrancePicBase64"
            prop="storeEntrancePicBase64"
          >
            <div class="upload-box">
              <div class="tips">
                须为彩色图片且小于2M，文件格式为png、jpeg、jpg
              </div>
              <div class="upload-btn-box">
                <el-button type="primary" plain>上传文件</el-button>
                <input
                  type="file"
                  class="file-button"
                  accept="image/jpeg, image/png,image/gif"
                  @change="storeDoorPicChange"
                />
              </div>
              <div class="img-box" v-if="formData.baseInfo.storeEntrancePicBase64">
                <img :src="'data:image/jpeg;base64,' + formData.baseInfo.storeEntrancePicBase64" alt="" />
              </div>
              <el-input v-show="false" v-model="formData.baseInfo.storeEntrancePicBase64"></el-input>
            </div>
          </el-form-item>

          <el-form-item label="店内环境照片" class="widthout-tips"  v-if="!formData.baseInfo.storeIndoorPicBase64" prop="storeIndoorPic">
            <div class="upload-box">
              <div class="tips">
                须为彩色图片且小于2M，文件格式为png、jpeg、jpg
              </div>
              <div class="upload-btn-box">
                <el-button type="primary" plain>上传文件</el-button>
                <input
                  type="file"
                  class="file-button"
                  accept="image/jpeg, image/png,image/gif"
                  @change="storeInDoorPicChange"
                />
              </div>
              <div class="img-box" v-if="formData.baseInfo.storeIndoorPic">
                <img :src="formData.baseInfo.storeIndoorPic" alt="" />
              </div>
              <el-input v-show="false" v-model="formData.baseInfo.storeIndoorPic"></el-input>
            </div>
          </el-form-item>

          <el-form-item label="店内环境照片" class="widthout-tips" v-if="formData.baseInfo.storeIndoorPicBase64" prop="storeIndoorPicBase64">
            <div class="upload-box">
              <div class="tips">
                须为彩色图片且小于2M，文件格式为png、jpeg、jpg
              </div>
              <div class="upload-btn-box">
                <el-button type="primary" plain>上传文件</el-button>
                <input
                  type="file"
                  class="file-button"
                  accept="image/jpeg, image/png,image/gif"
                  @change="storeInDoorPicChange"
                />
              </div>
              <div class="img-box" v-if="formData.baseInfo.storeIndoorPicBase64">
                <img :src="'data:image/jpeg;base64,' + formData.baseInfo.storeIndoorPicBase64" alt="" />
              </div>
               <el-input v-show="false" v-model="formData.baseInfo.storeIndoorPicBase64"></el-input>
            </div>
          </el-form-item>


          <el-form-item label="商户简称" prop="merchantShort">
            <el-input v-model="formData.baseInfo.merchantShort" placeholder="商户简称（必填）" clearable></el-input>
            <p class="form-item-tips">该简称将在支付完成页向买家展示，需与微信经营类目相关</p>
          </el-form-item>
          <el-form-item label="客服电话" prop="customTel">
            <el-input v-model="formData.baseInfo.customTel" placeholder="客服电话（必填）" clearable></el-input>
            <p class="form-item-tips">
              请正确填写客服电话，座机务必填写区号，格式如（座机：0755-XXXXXXXX）；手机：136XXXXXXXX；
              400电话：400XXXXXXX
            </p>
          </el-form-item>

          <el-form-item label="主体类型" class="widthout-tips" prop="organizationType" v-if="currentCreateType === '企业商户'">
            <el-radio-group size="mini" v-model="formData.baseInfo.organizationType">
              <el-radio label="2" border>企业</el-radio>
              <el-radio label="4" border>个体工商户</el-radio>
              <el-radio label="3" border>党政、机关及事业单位</el-radio>
              <el-radio label="1708" border>其他组织</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <div class="action-box applymentnew">
      <el-button type="primary"  size="medium" @click="goNextStep">保存并下一步</el-button>
    </div>
  </div>
</template>

<script>
import common from '@/mixins/common.js';
import otps from './opts.js';
export default {
  name: 'baseInfo',
  mixins: [common],
  props: ['oldBaseInfo', 'currentCreateType'],
  data() {
    return {
      otps,
      formData: {
        baseInfo: {
          name: '',
          phone: '',
          email: '',
          storeName: '',
          storeAddressCode: '',
          storeAddress: '',
          storeEntrancePic: '',
          storeEntrancePicBase64: '',
          storeIndoorPic: '',
          storeIndoorPicBase64: '',
          merchantShort: '',
          customTel: '',
          organizationType: '2',
          productDesc: '交通出行',
          store_province: '',
          store_city: '',
          storeAddressCodeDesc: []
        }
      },
      areaOpt: {
        provinceList: [],
        cityList: []
      },
      rules: {
        store_province: [
          { required: true, message: '请选择门店所属省份', trigger: 'blur' }
        ],
        store_city: [
          { required: true, message: '请选择门店所属城市', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '联系人姓名不能为空', trigger: 'blur' },
          {
            pattern: /^([\u4e00-\u9fa5·]{2,50}|([a-zA-Z·]+\s?){2,50})$/,
            message: '请输入正确的姓名'
          }
        ],
        phone: [
          { required: true, message: '手机不能为空', trigger: 'blur' },
          {
            pattern: /^0?(13[0-9]|15[012356789]|16[6]|17[012356789]|18[0-9]|19[89]|14[012356789])[0-9]{8}$/,
            message: '手机号不正确或号码所在号段暂不支持，请检查后重试'
          }
        ],
        email: [
          { required: true, message: '常用邮箱不能为空', trigger: 'blur' },
          {
            pattern: /^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)+(\.[A-Za-z0-9\-]{2,20})+)$/,
            message: '请输入正确的常用邮箱'
          }
        ],
        storeName: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
        storeAddress: [
          { required: true, message: '门店地址不能为空', trigger: 'blur' },
          {
            pattern: /^.{1,100}$/,
            message: '请将商户简称控制在1至100字符以内'
          }
        ],
        merchantShort: [
          { required: true, message: '商户简称不能为空', trigger: 'blur' },
          {
            pattern: /^.{2,30}$/,
            message: '请将商户简称控制在2至60字符以内'
          }
        ],
        customTel: [
          { required: true, message: '客服电话不能为空', trigger: 'blur' },
          {
            pattern: /(^[0-9-]{3,20}$)/,
            message: '请输入正确的客服电话'
          }
        ],
        storeEntrancePic: [{ required: true, message: '请上传门店门口照片', trigger: 'blur' }],
        storeEntrancePicBase64: [{ required: true, message: '请上传门店门口照片', trigger: 'blur' }],
        storeIndoorPic: [{ required: true, message: '请上传店内环境照片', trigger: 'blur' }],
        storeIndoorPicBase64: [{ required: true, message: '请上传店内环境照片', trigger: 'blur' }],
        organizationType: [{ required: true, message: '请选择主体类型', trigger: 'change' }]
      }
    };
  },
  created() {
    this.getAreaLv1();
    if (this.oldBaseInfo) {
      this.formData.baseInfo = this.oldBaseInfo
      this.getInitArea2(this.formData.baseInfo.store_province)
    }
  },
  methods: {
    async storeDoorPicChange(e) {
      const isLt2M = e.target.files[0].size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.showToast("上传图片不能大于2M",2);
        return;
      }
      const base64String = await this.getImgBase64(e);
      this.formData.baseInfo.storeEntrancePicBase64 = base64String;
    },
    async storeInDoorPicChange(e) {
      const isLt2M = e.target.files[0].size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.showToast("上传图片不能大于2M",2);
        return;
      }
      const base64String = await this.getImgBase64(e);
      this.formData.baseInfo.storeIndoorPicBase64 = base64String;
    },
    getImgBase64(e) {
      return new Promise(resolve => {
        var f = e.target.files[0];
        var reader = new FileReader();
        reader.onload = (function(theFile) {
          return function(e) {
            var binaryData = e.target.result;
            var base64String = window.btoa(binaryData);
            resolve(base64String);
          };
        })(f);
        reader.readAsBinaryString(f);
      });
    },
    getAreaLv1() {
      API.fetchGet('/operatorPark/getAreaByFatherID', {
        fatherID: 0
      }).then(
        res => {
          if (res.data) {
            this.areaOpt.provinceList = res.data;
          }
        }
      );
    },
    getAreaLv2(val) {
      this.formData.baseInfo.store_city = ''
      API.fetchGet('/operatorPark/getAreaByFatherID', {
        fatherID: val
      }).then(
        res => {
          this.areaOpt.cityList = res.data;
        },
      );
    },
    getInitArea2(val) {
      API.fetchGet('/operatorPark/getAreaByFatherID', {
        fatherID: val
      }).then(
        res => {
          this.areaOpt.cityList = res.data;
        },
      );
    },
    setProvinceDesc(val) {
      this.formData.baseInfo.storeAddressCodeDesc[0] = this.areaOpt.provinceList.find(item => item.pkAreaId === val).localName
    },
    setCityDesc(val) {
      this.formData.baseInfo.storeAddressCodeDesc[1] = this.areaOpt.cityList.find(item => item.pkAreaId === val).localName
    },
    goNextStep() {
      this.$refs['formData.baseInfo'].validate((valid) => {
          if (valid) {
            if (this.currentCreateType === '小微商户') {
                this.setProvinceDesc(this.formData.baseInfo.store_province)
            this.setCityDesc(this.formData.baseInfo.store_city)
            }
            this.$emit('setFormData', 'baseInfo', this.formData.baseInfo)
            this.$emit('goNextStep')
          } else {
            return false;
          }
        });
    }
  },
  watch: {
    oldBaseInfo() {
      if (this.oldBaseInfo) {
        this.formData.baseInfo = this.oldBaseInfo
        this.getInitArea2(this.formData.baseInfo.store_province)
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import './common.less';
</style>
